<template>
  <span>
    <el-popover v-model="show" placement="right" width="500" trigger="click">
      <el-row :gutter="10">
        <el-col :span="8">
          <cateselect size="mini" v-model="search.columnId"></cateselect>
        </el-col>
        <el-col :span="8">
          <el-input size="mini" placeholder="输入关键字" v-model="search.keyword" clearable></el-input>
        </el-col>
        <el-col :span="8">
          <el-button size="mini" icon="el-icon-search" @click="handleFilter">搜索</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="!pload" ref="multipleTable" @selection-change="selectionChange" border :data="tableData" max-height="400" size="mini">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="标题" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.headline}}
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-row>
          <el-col :span="16" style="text-align:left">
            <el-pagination :current-page="currentPage" @current-change="handleCurrentChange" :page-size="limit" background layout="prev, next, total" :total="count">
            </el-pagination>
          </el-col>
          <el-col :span="8" style="text-align:right">
            <el-button size="small" type="success" @click="submit">确认选择</el-button>
          </el-col>
        </el-row>
      </div>
      <el-button slot="reference" class="btn">
        <span class="els" style="max-width:100%;">{{ids.join(',')}}</span>
        <i class="el-icon-arrow-down"></i>
      </el-button>
    </el-popover>
  </span>
</template>
<script>
import * as api from '@/utils/api'
export default {
  props: {
    value: String
  },
  data() {
    return {
      show: false,
      search: {},
      tableData: [],
      selection: [],
      pload: false,
      pload2: false,
      currentPage: 1,
      limit: 20,
      count: 0,
      pages: 1,
      ids: []
    }
  },
  components: {
    cateselect: () => import('./cateSelect')
  },
  created() {
    this.ids = this.value ? this.value.split(',') : []
    this.getData()
  },
  methods: {
    submit() {
      this.ids = this.selection.map(item => {
        return item.articleId
      })
      this.$emit('input', this.ids.join(','))
      this.show = false
    },
    handleFilter() {
      this.currentPage = 0
      this.getData()
    },
    selectionChange(selection) {
      this.selection = selection
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    },
    async getData() {
      this.pload = false
      const Datas = await api.artList({
        delTag: 0,
        pageNum: this.currentPage,
        pageSize: this.limit,
        ...this.search
      })
      this.tableData = Datas.data
      this.count = Datas.pageInfo.total
      this.pages = Datas.pageInfo.pages
      this.pload = true
    }
  }
}
</script>
<style scoped>
.page {
  text-align: center;
  padding-top: 10px;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btn {
  padding-left: 15px;
  padding-right: 10px;
}
</style>